<!--
 * @Author: 
 * @Date: 2025-02-13 10:38:08
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-04-07 14:37:23
 * @Description: 
-->
<template>
  <el-row>
    <el-col
      :span="24"
      class="paltform-container"
      :style="`height:${view.height}px`"
    >
      <div class="header">
        <div class="tit-warp">
          <span class="tit-name"> 红线监测成果管理 </span>
        </div>
      </div>

      <div class="tab-container">
        <div class="tab-box left-box">
          <div class="custom-button-warp">
            <div class="custom-button active">红线检测任务</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button">委托生产任务</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button">自定义按钮</div>
          </div>
        </div>
        <div class="tab-box middle-box"></div>
        <div class="tab-box right-box">
          <div class="custom-button-warp">
            <div class="custom-button">自定义按钮</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button">自定义按钮</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button">自定义按钮</div>
          </div>
        </div>
      </div>

      <div id="map-container" :style="`height:${view.height}px`"></div>
      <div id="mouse-position" class="position_coordinate"></div>
      <!-- 卷帘控件 -->
      <div
        class="ol-control ol-unselectable my-swipe"
        :style="{ pointerEvents: isMoving ? 'auto' : 'none' }"
        id="mySwipe"
        ref="mySwipe"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      >
        <div
          class="my-swipe-line swipe-horizontal"
          :style="{
            left: swipeVal + '%',
            pointerEvents: isMoving ? 'none' : 'auto',
          }"
        >
          <span
            class="my-swipe-line-btn"
            :style="{ pointerEvents: isMoving ? 'none' : 'auto' }"
            @mousedown="mouseDown"
          >
            <el-image :src="dragImg" alt="拖动" style="width: 50px" />
          </span>
        </div>
      </div>
      <div style="position: relative">
        <div class="feature-list-container">
          <FeatureList
            :dataList="dataList"
            @itemSelected="handleItemSelected"
          />
        </div>
      </div>

      <div style="position: relative">
        <div class="task-card-container">
          <taskCard></taskCard>
        </div>
      </div>

      <div style="position: relative">
        <el-card style="width: 400px" class="edit-container">
          <div class="tool-body">
            <el-collapse-transition>
              <el-card class="base-layer-card" size="small">
                <template #header>
                  <div class="base-layer-header">
                    <span>底图选择</span>
                  </div>
                </template>
                <div class="base-layer-container">
                  <el-card
                    v-for="layer in baseLayers"
                    :key="layer.type"
                    :body-style="{ padding: '0px' }"
                    class="img-card"
                    @click="baseImageClickHandler(layer)"
                  >
                    <el-image
                      style="width: 111px; height: 81px"
                      :src="layer.img"
                      :fit="'fill'"
                    />
                    <div style="padding: 5px; text-align: center">
                      <span>{{ layer.name }}</span>
                    </div>
                  </el-card>
                </div>
                <template #footer> </template>
              </el-card>
            </el-collapse-transition>
          </div>
          <div></div>
        </el-card>
      </div>

      <ImageComparisonModal
        ref="imageCard"
        :hou="currentFeatureInfo.hou"
        :qian="currentFeatureInfo.qian"
        :relatedTaskId="currentFeatureInfo.id"
        :data="currentFeatureInfo"
        :isVisible="isCardVisible"
        @closeCard="closeCard"
      />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import {
  Close,
  Edit,
  Picture,
  Upload,
  PictureFilled,
  Operation,
  Postcard,
  Drizzling,
} from "@element-plus/icons-vue";
import paginationCustom from "@/components/pagination/paginationCustom.vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image, Vector as VectorLayer } from "ol/layer";
import { WMTS, TileWMS, OSM, Tile, ImageWMS, TileImage } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get, fromLonLat } from "ol/proj";
import MousePosition from "ol/control/MousePosition";
import { format as formatAxirs } from "ol/coordinate";
import "ol/ol.css"; // 导入 OpenLayers 样式文件
import { ScaleLine, defaults as defaultControls } from "ol/control";
import { getWidth, getTopLeft, boundingExtent } from "ol/extent";
import HttpService from "@/api/api";
import baseImg1 from "@/assets/img/vec.jpg";
import baseImg2 from "@/assets/img/img.jpg";
import baseImg3 from "@/assets/img/ter.jpg";
import utils from "@/utils/util";
import config from "@/config/config";
import { Vector as VectorSource } from "ol/source";
import { GeoJSON } from "ol/format";
import { Style, Fill, Stroke } from "ol/style";
import { Feature } from "ol";
import axios from "axios";
import FeatureList from "./FeatureList.vue"; // 引入图斑列表子组件
import ImageComparisonModal from "./ImageComparisonModal.vue";
import taskCard from "./taskCard.vue";
import Control from "ol/control/Control";
import dragImg from "./drag.png";
var map;
const isMoving = ref(false);
const swipeVal = ref(50);
let swipeLayer: any = null;
const resolutions = [];
const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}
const resultLayerVisible = ref(true);

// 处理选中的图斑信息
const handleItemSelected = (item) => {
  closeCard();
  // 这里可以进一步处理选中的图斑信息
  const { JD, WD } = item; // 这里假设 item 包含 JD 和 WD 信息
  // 将经纬度转换为投影坐标
  const coordinate = fromLonLat([JD, WD], projection);
  // 设置地图的中心位置并缩放
  map.getView().setCenter(coordinate); // 设置地图的中心点
  map.getView().setZoom(16); // 设置地图的缩放级别（可以根据需要调整）
};
const dataList = ref([]);
const baseLayers = [
  {
    type: "vecLayer",
    name: "矢量底图",
    img: baseImg1,
  },
  {
    type: "imgLayer",
    name: "影像底图",
    img: baseImg2,
  },
  {
    type: "terLayer",
    name: "地形晕渲",
    img: baseImg3,
  },
];

const currentBaseLayer = ref("imgLayer");

const baseImageClickHandler = function (layer) {
  switchBaseLayer(layer.type);
  currentBaseLayer.value = layer.type;
};

const switchBaseLayer = (layerType) => {
  if (!map) return;
  map.getLayers().forEach((layer) => {
    if (
      layer.values_.name == layerType ||
      layer.values_.name == "resultLayer" ||
      layer.values_.name == "baseLayer" ||
      layer.values_.name == "cvaLayer"
    ) {
      layer.setVisible(true);
      if (!resultLayerVisible.value && layer.values_.name == "resultLayer") {
        layer.setVisible(false);
      }
    } else {
      layer.setVisible(false);
    }
  });
};

const initMap = function () {
  // 创建GeoServer WMS 图层
  const wmsLayer1 = new Image({
    source: new ImageWMS({
      url: "http://localhost:8055/geoserver/result/wms",
      params: {
        LAYERS: "result:qian6_WGS_84", // 图层名称
        VERSION: "1.1.0",
        FORMAT: "image/png", // 图像格式
      },
      serverType: "geoserver",
      ratio: 1,
    }),
  });
  wmsLayer1.setOpacity(1);
  wmsLayer1.set("name", "baseLayer");
  const wmsLayer2 = new Image({
    source: new ImageWMS({
      url: "http://localhost:8055/geoserver/result/wms",
      params: {
        LAYERS: "result:hou6_WGS_84", // 图层名称
        VERSION: "1.1.0",
        FORMAT: "image/png", // 图像格式
      },
      serverType: "geoserver",
      ratio: 1,
    }),
  });
  wmsLayer2.setOpacity(1);
  wmsLayer2.set("name", "baseLayer");

  const TIANDI_KEY = "eec7fae87888db2dc4c30c0c458fb66b";
  const matrixSet = "c";
  const terLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"ter"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "ter",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous", // 解决跨域问题 如无该需求可不添加
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        //resolutions: res.slice(0, 15),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  terLayer.set("name", "terLayer");

  const imgLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"img"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "img",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous", // 解决跨域问题 如无该需求可不添加
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        //resolutions: res.slice(0, 15),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  imgLayer.set("name", "imgLayer");

  const vecLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"vec"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "vec",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous", // 解决跨域问题 如无该需求可不添加
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        //resolutions: res.slice(0, 15),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });

  vecLayer.set("name", "vecLayer");

  const cvaLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"cva"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "cva",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous", // 解决跨域问题 如无该需求可不添加
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  cvaLayer.set("name", "cvaLayer");
  const longitude = 85.873042;
  const latitude = 47.481497;
  const initialCenter = fromLonLat([longitude, latitude], projection); //
  map = new Map({
    target: "map-container",
    layers: [
      // 底图
      terLayer,
      vecLayer,
      imgLayer,
      wmsLayer2,
      wmsLayer1,
      cvaLayer,
    ],
    view: new View({
      projection: projection,
      center: initialCenter, // Set map center to the converted coordinates
      zoom: 16, // Set initial zoom level
    }),
    controls: defaultControls({
      attribution: true,
      zoom: false,
      rotate: true,
    }).extend([]),
  });

  // 设置卷帘图层
  let swipeVal = 50; // 初始滑动位置为50%

  // 在图层渲染之前设置裁剪
  const prerender = (e) => {
    const ctx = e.context;
    const hOrw = ctx.canvas.width;
    const nVal = (hOrw * swipeVal) / 100; // 根据滑动位置裁剪图层
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, nVal, ctx.canvas.height); // 裁剪左侧部分
    ctx.clip();
    map.render();
  };

  const postrender = (e) => {
    const ctx = e.context;
    ctx.restore();
  };

  // 设置卷帘控件
  const setSwipeLayer = (layer) => {
    layer.on("prerender", prerender);
    layer.on("postrender", postrender);
  };

  setSwipeLayer(wmsLayer1); // 设置wmsLayer1为卷帘图层

  // 监听鼠标事件来更新卷帘位置
  const mouseMove = (e) => {
    if (!isMoving) return;
    const clientWidth = e.currentTarget.clientWidth;
    const x = e.offsetX;
    if (x < 0 || x > clientWidth) return;
    swipeVal = (x / clientWidth) * 100;
  };

  let isMoving = false;
  const mouseDown = (e) => {
    isMoving = true;
  };

  const mouseUp = (e) => {
    isMoving = false;
  };

  // 添加卷帘控件到页面
  const swipeControl = new Control({
    element: document.querySelector("#mySwipe"), // 控件元素
  });

  map.addControl(swipeControl);

  // 卷帘控件拖动事件
  document.querySelector("#mySwipe").addEventListener("mousemove", mouseMove);
  document.querySelector("#mySwipe").addEventListener("mouseup", mouseUp);
  document.querySelector("#mySwipe").addEventListener("mousedown", mouseDown);
  var mousePositionControl = new MousePosition({
    coordinateFormat: function (coordinate) {
      return formatAxirs(coordinate, "经度:{x} 纬度:{y}", 2);
    },
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"), //将位置数据放到那里
  });
  map.addControl(mousePositionControl);

  // 比例尺控件
  let scaleLine = new ScaleLine({
    units: "metric",
  });
  map.addControl(scaleLine);
};

const fetchData = async () => {
  try {
    const response = await axios.get("/algorithmApi/spatial-features/query");
    dataList.value = response.data.data; // 将接口返回的数据存入 dataList
    renderVectorLayer(dataList.value);
    console.log(dataList.value)
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

import Select from "ol/interaction/Select";
import { click } from "ol/events/condition";

// 定义一个全局变量来保存已选中的图斑
let selectedFeature = null;
let selectInteraction;
// 渲染图层并添加点击事件
const renderVectorLayer = (data) => {
  const vectorSource = new VectorSource();

  data.forEach((item) => {
    !item.YSWTLXMC?item.YSWTLXMC='工业开发':1
    if (item.YSWTLXMC) {
      const geoJson = item.geom;
      const features = new GeoJSON().readFeatures(geoJson, {
        dataProjection: "EPSG:4326", // 确保数据坐标系是正确的
        // featureProjection: 'EPSG:3857', // 将数据转换为地图使用的投影坐标系
      });
      console.log(item)
      features.forEach((feature) => {
        feature.set("id", item.id); // 假设每个 item 对象有一个 id 属性
        feature.setStyle(getStyleBasedOnType(item.YSWTLXMC)); // 设置图斑样式
        vectorSource.addFeature(feature); // 将 Feature 添加到矢量源中
      });
    }
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource,
    zIndex: 10,
  });
  vectorLayer.set("name", "resultLayer");

  map.addLayer(vectorLayer); // 添加图层到地图

  // 使用 Select 控件来处理点击事件
  selectInteraction = new Select({
    condition: click, // 使用点击条件触发选择
    layers: [vectorLayer], // 监听当前图层的点击事件
  });

  // 绑定选择事件
  selectInteraction.on("select", (event) => {
    const selectedFeatures = event.selected;
    if (selectedFeatures.length > 0) {
      const feature = selectedFeatures[0]; // 获取选中的图斑
      handleFeatureSelection(feature); // 处理选中图斑
    }
  });

  // 添加选择控件到地图
  map.addInteraction(selectInteraction);
};

// 设置图斑的默认样式
const getStyleBasedOnType = (type = "工业开发") => {
  console.log(type);
  let color;
  switch (type) {
    case "工业开发":
      color = "rgba(255, 0, 0, 0.1)";
      break;
    case "居民点建设":
      color = "rgba(0, 255, 0, 0.6)";
      break;
    case "养殖开发":
      color = "rgba(0, 0, 255, 0.6)";
      break;
    case "其他开发":
      color = "rgba(255, 165, 0, 0.6)";
      break;
    default:
      color = "rgba(128, 128, 128, 0.6)";
      break;
  }

  return new Style({
    fill: new Fill({
      color: color,
    }),
    stroke: new Stroke({
      color: "rgba(255, 0, 0, 1)",
      width: 5,
    }),
  });
};

// 设置选中图斑的样式
const getSelectedStyle = (type = "工业开发") => {
  let color;
  switch (type) {
    case "工业开发":
      color = "rgba(255, 0, 0, 0.1)";
      break;
    case "居民点建设":
      color = "rgba(0, 255, 0, 0.1)";
      break;
    case "养殖开发":
      color = "rgba(0, 0, 255, 0.4)";
      break;
    case "其他开发":
      color = "rgba(255, 165, 0, 0.4)";
      break;
    default:
      color = "rgba(128, 128, 128, 0.4)";
      break;
  }

  return new Style({
    fill: new Fill({
      color: color,
    }),
    stroke: new Stroke({
      color: "blue",
      width: 5,
    }),
  });
};
const currentFeatureInfo: any = ref({});
// 处理选中的图斑信息
const handleFeatureSelection = (feature) => {
  if (feature instanceof Feature) {
    // 如果有已选中的图斑，恢复其原始样式
    if (selectedFeature) {
      selectedFeature.setStyle(
        getStyleBasedOnType(selectedFeature.get("YSWTLXMC"))
      );
    }

    // 设置当前选中的图斑的样式为选中样式
    selectedFeature = feature;
    feature.setStyle(getSelectedStyle(feature.get("YSWTLXMC")));
    const featureId = feature.get("id");

    dataList.value.forEach((item) => {
      if (item.id == featureId) {
        currentFeatureInfo.value = item;
        console.log(currentFeatureInfo.value);
        openCard();
        clearSelection();
      }
    });
  }
};
// 清除选中事件
const clearSelection = () => {
  selectInteraction.getFeatures().clear(); // 清除所有选中的要素
  console.log("选中状态已清除");
};
// 控制卡片显示的状态
const isCardVisible = ref(false);

// 控制卡片显示的方法
const openCard = () => {
  isCardVisible.value = true;
};

const closeCard = function () {
  isCardVisible.value = false;
};

// 设置卷帘图层
function setSwipeLayer(layer: any) {
  unsetSwipeLayer();
  layer.on("prerender", prerender);
  layer.on("postrender", postrender);
  swipeLayer = layer;
}

// 卸载卷帘图层
function unsetSwipeLayer() {
  if (swipeLayer) {
    swipeLayer.un("prerender", prerender);
    swipeLayer.un("postrender", postrender);
    swipeLayer = null;
  }
}

// 渲染前裁剪
function prerender(e: any) {
  const ctx = e.context;
  const hOrw = ctx.canvas.width;
  const nVal = (hOrw * swipeVal.value) / 100; // 根据滑动位置裁剪图层
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, nVal, ctx.canvas.height); // 裁剪左侧部分
  ctx.clip();
  map.render();
}

// 渲染后恢复
function postrender(e: any) {
  const ctx = e.context;
  ctx.restore();
}

// 监听鼠标事件来更新卷帘位置
function mouseMove(e: any) {
  if (!isMoving.value) return;
  const clientWidth = e.currentTarget.clientWidth;
  const x = e.offsetX;
  if (x < 0 || x > clientWidth) return;
  swipeVal.value = (x / clientWidth) * 100;
}

function mouseDown(e: any) {
  isMoving.value = true;
}

function mouseUp(e: any) {
  isMoving.value = false;
}

onMounted(async () => {
  console.log("Mounted and calling fetchData...");
  await initMap();
  fetchData();
});

var view = reactive({
  height: window.innerHeight,
});
/* window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100); */
</script>

<style lang="scss" scoped>
.header {
  background: url("@/assets/bigScreen/img/title_back.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 114px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-position: 0px -13px;
  z-index: 200;

  .tit-warp {
    position: relative;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;

    .tit-name {
      font-size: 28px;
      color: #d1e5ff;
      line-height: 30px;
      text-shadow: 1px 2px 0px rgba(95, 129, 151, 0.47),
        2px 4px 2px rgba(58, 99, 137, 0.15), 4px 10px 18px rgba(27, 41, 60, 0.5);
      background: linear-gradient(0deg, #ffffff 0%);
      -webkit-text-stroke: 1px #eff5ff;
      -webkit-text-fill-color: transparent;
    }
  }
}

#map-container {
  width: 100%;
  height: 600px;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.position_coordinate {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  padding: 5px 10px;
  z-index: 110;
}

.base-layer-card {
  background: none;

  .base-layer-header {
    display: flex;
    justify-content: space-between;
  }

  .base-layer-container {
    display: flex;
    justify-content: space-between;

    .active {
      border: 2px solid #56a3f0;
    }
  }

  .img-card {
    border: 2px solid hsla(210, 96%, 54%, 0);
    cursor: pointer;

    &:hover {
      border: 2px solid #4685c4;
    }
  }
}
</style>
<style lang="scss">
.edit-container {
  z-index: 100;
  position: absolute;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  right: 34px;
  top: 50px;
  width: 300px;

  .tool-header {
    padding: 0 5px 5px;
    border-bottom: 1px solid rgb(109, 194, 236);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tool-body {
    .el-avatar {
      margin-right: 10px;
    }
  }

  .tool-footer {
    padding: 10px 5px;
    border-top: 1px solid rgb(109, 194, 236);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-card__body {
    padding: 5px;

    .el-input__wrapper {
      color: #d1e5ff;
    }
  }

  .tool-body {
    & > .el-card {
      border: none !important;

      .el-card.is-always-shadow {
        box-shadow: none !important;
      }
    }

    .base-layer-card.is-always-shadow {
      box-shadow: none !important;
    }
  }
}
.feature-list-container {
  position: absolute;
  right: 34px;
  top: 360px;
  z-index: 100;
}
.task-card-container {
  position: absolute;
  left: 34px;
  top: 50px;
  z-index: 100;
}

.my-swipe {
  width: 100%;
  height: 100%;
  z-index: 110;
  background: none !important;
  padding: 0;
  pointer-events: none;
}

.my-swipe-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background: white;
}

.my-swipe-line-btn {
  position: relative;
  display: block;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  background: white;
  border-radius: 50%;
  cursor: col-resize;
  img {
    vertical-align: middle;
    border-style: none;
  }
}
.tab-container {
  width: 100%;
  position: absolute;
  display: flex;
  top: 20px;
  z-index: 210;

  .tab-box {
    .custom-button {
      flex: 1;
      text-align: center;
      display: inline-block;
      width: 203px;
      height: 88px;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      text-shadow: 8px 11px 1px rgba(145, 199, 255, 0.05),
        18px 38px 32px rgba(0, 0, 0, 0.24);
      font-style: italic;
      background: url("@/assets/bigScreen/img/tab_button.png") no-repeat;
      color: #c1f5ff;
      background-position: 0px -10px;
      cursor: pointer;

      &:hover {
        background: url("@/assets/bigScreen/img/tab_button_active.png")
          no-repeat;
        background-position: 0px -10px;
      }
    }

    .active {
      background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
      background-position: 0px -10px;
    }
  }

  .left-box {
    flex: 0.35;
    display: flex;
  }

  .middle-box {
    flex: 0.3;
  }

  .right-box {
    flex: 0.35;
    display: flex;
  }
}
</style>
